Ext.define('App.commons.report.ExtendCartesianChart', {
    extend: 'Ext.chart.CartesianChart',
    alias: ['widget.ExtendCartesianChart'],
    engine: 'Ext.draw.engine.Svg',
    config: {center: [0, 0]},
    legend: {
        listeners: {
            initialize: function () {
            }
        },
        docked: 'bottom'
    },
    interactions: 'rotate',
    constructor: function (config) {
        var chartConfiguration = config.chartConfiguration;
        var datas = config.reportDatas;
        var kpis = config.kpis;

        var axes = this.createAxes(chartConfiguration.axes);
        var series = this.createSeries(chartConfiguration.series);
        var store = this.createStore(kpis, datas);
        Ext.apply(config, {
            //初始化基础属性
            store: store,
            axes: axes,
            series: series,
            header: {title: '<span style="color:#666;font-size: 22px;line-height: 22px;">' + chartConfiguration.title + '</span>', style: 'background:#fff;'},
            height: chartConfiguration.height || 400,
            columnWidth: chartConfiguration.width || .5,
            theme: chartConfiguration.theme || 'default',
            innerPadding: '25 10 10 10',//从轴线开始到图Series内容的填充
            insetPadding: {//图边界到图内容的填充（有图例时，图例一边从图例位置开始算）
                top: Ext.isEmpty(chartConfiguration.description) ? 10 : 20,
                left: 10,
                right: 10,
                bottom: 10
            },
            sprites: [this.createDescriptionSprites(chartConfiguration.description)]
        });
        this.callParent(arguments);
    },
    createDescriptionSprites: function (description) {
        if (!Ext.isEmpty(description)) {
            return {
                type: 'text',
                text: description,
                fontSize: 12,
                fillStyle: '#999',
                x: 40, // the sprite x position
                y: 10 // the sprite y position
            };
        }
        return null;
    }
    ,
    createSeries: function (series) {
        var me = this;
        var list = [];

        for (var i = 0; i < series.length; i++) {
            var item = series[i];
            for (var key in item) {
                if (item[key] == 'null') {
                    delete item[key];
                }
            }
            item.yField = item.yFields;
            //选中时高亮
            item.highlight = true;
            //item.highlight=true;

            if (!Ext.isArray(item.yField) && item.yField != 'null') {
                item.srcYFields = item.yField;
                item.yField = item.yField.replace(/\s/g, '')
                item.yField = item.yField.split(',')
                item.title = item.yField;
            }
            list.push(item);
        }
        return list;
    }
    ,
    createAxes: function (axes) {
        var me = this;
        var list = [];
        if (!Ext.isEmpty(axes)) {
            Ext.Array.each(axes, function (item) {
                var axis = {
                    fields: item.fields.replace(/\s/g, '').split(','),
                    percent: item.percent,
                    position: item.position,
                    title: item.title,
                    type: item.type
                }
                if (Ext.String.startsWith(item.type, 'category')) {
                    //label文字斜体
                    axis.label = {
                        rotate: {
                            degrees: -45
                        }
                    };
                } else if (Ext.String.startsWith(item.type, 'numeric')) {
                    //定义左边Y轴对应数据表格背景
                    if (me.isSetGrid !== true) {
                        axis.grid = {
                            odd: {
                                fillStyle: 'rgba(255, 255, 255, 0.06)'
                            },
                            even: {
                                fillStyle: 'rgba(0, 0, 0, 0.03)'
                            }
                        };
                        me.isSetGrid = true;
                    }
                    if (item.percent == true) {
                        axis.renderer = function (axis, label, layoutContext) {
                            label = Ext.util.Format.percent(label, '####.##');
                            return label;
                        }
                    }
                }
                list.push(axis);
            });
        }
        return list;
    }
    ,
    createStore: function (kpis, datas) {
        return Ext.create('Ext.data.Store', {
            fields: this.createFields(kpis),
            data: datas,
        });
    }
    ,
    createFields: function (kpis) {
        var fields = [];
        Ext.Array.each(kpis, function (kpi) {
            fields.push(kpi.kpiConfiguration.field)
        });
        return fields;
    }

})